<!DOCTYPE html>
<html lang="en"> 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>贪吃蛇游戏</title>
    <link rel="stylesheet" href="./css/head.css">
</head>

<body>
    <div class="panbg"></div>
    <div class="btnbox">
        <div class="score">得分：<span>0</span></div>
        <button id="start"><p>开始</p></button>
         <button id="pause"><p>暂停</p></button>
         <button id="restart">重新开始</button>
    </div>
    <div class="map"></div>
    <script src="./js/food.js"></script>
    <script src="./js/snake.js"></script>
    <script src="./js/game.js"></script>
    

    <script>
        // const food = new Food(".map")
        // const snake = new Snake(".map")
        const game=new Game(".map",".score span",".panbg")
           //按钮
           const start=document.querySelector("#start")
        const pause=document.querySelector("#pause")
        const restart=document.querySelector("#restart")
        
         start.onclick=function(){
            game.start()
         } 
         pause.onclick=function(){
            game.pause()
         }
         restart.onclick=function(){
            game.restart()
         }

         document.onkeydown=function(e){
            switch (e.keyCode) {
                case 37:
                    game.change("left")
                    break;
                case 38:
                    game.change("top")
                    break;
                case 39:
                    game.change("right")
                    break;
                case 40:
                    game.change("bottom")
                    break;
               
            }

         }

    </script>
</body>

</html>